<html>
<head>
	<title>The TV-o-Matic Welcomes You!</title>
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
	   <script>
	<script src="tvom.js"></script>
	
</head>
<body>
<center>
<h1>What shall the TV-o-Matic find for you today?</h1>
<div>
	<input type="text" id="queryInput">
</div>
</center>

<div id="contentArea">
	<h3 id="textArea">
		<u>The following WOULD BE sent to YouTube if this script did anything:</u>
		
		<ol id="textList"></ol>
	</h3>
</div>
	<script>
	//Thus far all I've got going here is an input form that
	//acts very much like Google's instant search. While the
	//user is typing, it'll do nothing, but after a short delay
	//in the user's input, it'll perform some action. That
	//action is located in the 'setTimeout' callback function.
	
	//the variable pressedRecently will act very much
	//like a stack: if the user presses an alphanumeric key,
	//it'll increment (push). After a short delay (delayLength in ms),
	//it'll decrement the stack (pop). If another character has been
	//pressed during this delay, the stack will be greater than zero.
	//If not, it'll be exactly zero, and we can perform our query.
	var pressedRecently = 0;
	var delayLength = 500;
	
	//The following is jQuery's way of adding event handlers. 
	//Basically, it looks for the HTML element 'queryInput' 
	//(which is the textbox), and on a keypress, 
	//it'll perform the callback
	//function with 'event' as a parameter. This function basically
	//does what I explained above.
		$("#queryInput").keypress(function(event){
			pressedRecently++;
			setTimeout(function(){
				pressedRecently--;
				if(pressedRecently == 0)
					//Perform the query
					
					//For now, I've just got a bit of dummy script
					//that'll append the entered text onto an
					//ordered list (<ol>) to prove the concept
					$("#textList").append("<li>" + $("#queryInput").val() + "</li>");
			}, delayLength);
		})
	</script>
</body.
</html>